<template>
    <div :key="'v-3d-map_' + _uid" ref="container" class="v-3d-map"></div>
</template>

<script>
import App from './App.js';
export default {
    name: 'v-3d-map',
    components: {},
    props: {
        settings: {
            type: Object,
            default: () => {
                return {
                    rotationSpeed: 0
                };
            }
        },
        // settings: Object,
        rotatable: Boolean,
        opacity: Number,
        offset: Object,
        camera: {
            type: Object,
            default: () => {
                return { x: 0, y: 800, z: 650 };
            }
        },
        axesHelper: Number,
        gridHelper: Object,
        light: Object,
        sky: Object,
        floor: Object,
        effect: Object,
        outlinePassable: {
            type: Boolean,
            default: false
        },
        showStats: Boolean,
        showLabels: Boolean,
        showAlarm: Boolean,
        selectable: Boolean,
        instancedMesh: Boolean,
        mergedGeometry: {
            type: Boolean,
            default: true
        },
        labelsHelper: Object,
        showCameraHelper: Boolean,
        controlsDisabled: Boolean,
        rotationSpeed: Number,
        followVehicle: String,
        clickCallback: Function,
        pointerDownCallback: Function,
        pointerMoveCallback: Function
    },
    data() {
        return {
            currentSettings: _.cloneDeep(this.settings)
            // currentSettings: this.settings
        };
    },
    watch: {
        // settings: {
        //     handler(val) {
        //         // console.log('v-3d-map.watch.settings: ', val);
        //         this.currentSettings = _.cloneDeep(val);
        //         App.getInstance().settingsChanged(val);
        //     },
        //     deep: true,
        //     immediate: true
        // },
        opacity: {
            handler(val) {
                this.app && this.app.opacityChanged(_.cloneDeep(val));
            },
            deep: true,
            immediate: true
        },
        offset: {
            handler(val) {
                this.app && this.app.offsetChanged(_.cloneDeep(val));
            },
            deep: true,
            immediate: true
        },
        camera: {
            handler(val) {
                this.app && this.app.cameraChanged(_.cloneDeep(val));
            },
            deep: true,
            immediate: true
        },
        light: {
            handler(val) {
                this.app && this.app.lightChanged(_.cloneDeep(val));
            },
            deep: true,
            immediate: true
        },
        sky: {
            handler(val) {
                this.app && this.app.skyChanged(_.cloneDeep(val));
            },
            deep: true,
            immediate: true
        },
        floor: {
            handler(val) {
                this.app && this.app.floorChanged(_.cloneDeep(val));
            },
            deep: true,
            immediate: true
        },
        gridHelper: {
            handler(val) {
                this.app && this.app.gridHelperChanged(_.cloneDeep(val));
            },
            deep: true,
            immediate: true
        },
        effect: {
            handler(val) {
                this.app && this.app.effectChanged(_.cloneDeep(val));
            },
            deep: true,
            immediate: true
        },
        outlinePassable(val) {
            this.app.outlinePassableChanged(val);
        },        
        controlsDisabled(val) {
            this.controlsDisabledChanged(val);
        },
        rotatable(val) {
            this.app.rotatableChanged(val);
        },
        showLabels(val) {
            this.app.showLabelsChanged(val);
        },
        showAlarm: {
            handler(val) {
                this.app && this.app.showAlarmChanged(val);
            },
            immediate: true
        },
        selectable(val) {
            this.app.selectableChanged(val);
        },
        instancedMesh: {
            handler(val) {
                this.app && this.app.instancedMeshChanged(val);
            },
            immediate: true
        },
        mergedGeometry(val) {
            this.app.mergedGeometryChanged(val);
        },
        followVehicle(val) {
            this.app.followVehicleChanged(val);
        }
    },
    mounted() {
        this.init();
    },
    beforeUnmount() {
        this.app.destory();
    },
    methods: {
        init() {
            this.currentSettings.container = this.$refs.container;
            this.app = App.getInstance();
            // this.app = new App();
            // this.app.setDefaultCamera({ x: 0, y: 800, z: 650 });
            // this.app.init(this.$refs.container);
            this.currentSettings = Object.assign(this.currentSettings, this.$props);
            this.app.init(_.cloneDeep(this.currentSettings));
            this.app.start();
        },
        controlsDisabledChanged(val) {
            this.app.controlsChanged({ enabled: val });
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.v-3d-map {
    width: 100%;
    height: 100%;

    .tips {
        border: #cccccc 1px solid;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.85);
        padding: 5px;
        font-size: 10px;
        font-weight: 300;

        // &:before {
        //     content: 'x';
        //     position: absolute;
        //     right: 5px;
        //     padding: 1px 6px;
        //     cursor: pointer;
        // }
        .icon-close {
            position: absolute;
            top: 3px;
            right: 2px;
            padding: 2px;
            cursor: pointer;
            font-size: 10px;
            font-weight: 700;
        }
    }
}
</style>
